<template>
  <div>
    <header class="header-back">
      <i class="iconfont fl back" @click="goBack">&#xe624;</i>
      <br style="clear: both;"/>
    </header>
    <div class="setPass-div">
      <div>设置密码</div>
      <p class="tip-p">为了您的账号安全，请设置密码，完成后您就可以使用手机号+密码登录</p>
      <div class="ipt-div">
        <span>昵称</span>
        <input
          type="text"
          v-model="userInfo.nickName"
          placeholder="请输入昵称"/>
      </div>
      <div class="ipt-div">
        <span>设置密码</span>
        <input
          :type="passWord"
          v-model="userInfo.passWord"
          placeholder="请输入6-20位数字或字母"/>
        <div @click="showEye">
          <i v-if="isFalse" class="iconfont eye">&#xe60c;</i>
          <i v-else class="iconfont eye">&#xe652;</i>
        </div>
      </div>
      <div class="ipt-div">
        <span>邀请码</span>
        <input
          type="text"
          v-model="userInfo.inviterNum"
          placeholder="请输入邀请码"/>
      </div>
      <div class="btn-div" @click="submit">保存</div>
    </div>
  </div>
</template>

<script>
import {addUser, selectInvitationCode} from '../../api/person.js'
export default {
  data () {
    return {
      isFalse: true,
      passWord: 'password',
      userInfo: {
        userNum: '',
        userPhone: '',
        passWord: '',
        nickName: '',
        registerTime: '',
        invitationCode: '',
        inviterNum: ''
      },
      invitation: 0
    }
  },
  mounted () {
    let that = this
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      that.$router.go(-1)
      error
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    showEye () {
      this.isFalse = !this.isFalse
      if (this.isFalse) {
        this.passWord = 'password'
      } else {
        this.passWord = 'text'
      }
    },
    submit () {
      let time = new Date()
      let times = time - 0
      let time1 =
      time.getFullYear() + '-' +
      ((time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)) + '-' +
      ((time.getDate()) >= 10 ? time.getDate() : '0' + time.getDate()) + ' ' +
      ((time.getHours()) >= 10 ? time.getHours() : '0' + time.getHours()) + ':' +
      ((time.getMinutes()) >= 10 ? time.getMinutes() : '0' + time.getMinutes()) + ':' +
      ((time.getSeconds()) >= 10 ? time.getSeconds() : '0' + time.getSeconds())
      this.userInfo.userNum = times
      let chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ'.split('')
      let radix = chars.length
      let qutient = +this.userInfo.userNum
      let arr = []
      do {
        let mod = qutient % radix
        qutient = (qutient - mod) / radix
        arr.unshift(chars[mod])
      } while (qutient) {
        this.userInfo.invitationCode = arr.join('')
      }
      this.userInfo.registerTime = time1
      if (this.userInfo.inviterNum !== '') {
        this.selectInvitationCode()
        if (this.invitation === 500) {
          this.$messagebox.alert('邀请码无效').then(() => {
          }).catch(() => {
            return false
          })
        }
      }
      if (this.userInfo.nickName !== '' && this.userInfo.passWord !== '') {
        if (this.userInfo.passWord.length >= 6 && this.userInfo.passWord.length <= 20) {
          this.$indicator.open({
            text: '提交中',
            Indicator: 'fading-circle'
          })
          this.addUser()
        }
      } else {
        this.$messagebox.alert('请完善您的信息').then(() => {
        }).catch(() => {
          return false
        })
      }
    },
    async addUser () {
      try {
        let data = await addUser(this.userInfo)
        console.log(data)
        this.$indicator.close()
        if (data.data.status === 200) {
          this.$store.state.isLogin = true
          localStorage.setItem('isLogin', true)
          localStorage.userNum = this.userInfo.userNum
          this.$store.state.userNum = this.userInfo.userNum
          localStorage.nickName = this.$store.state.nickName = this.userInfo.nickName
          this.$store.state.userPhone = this.usertel
          if (this.$route.query.path) {
            this.$router.push(this.$route.query.path)
          } else {
            this.$router.push('/index/person')
          }
        } else {
          this.$toast({
            message: '请稍后重试'
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    async selectInvitationCode () {
      try {
        let data = await selectInvitationCode({inviterNum: this.userInfo.inviterNum})
        this.invitation = data.data.status
      } catch (err) {
        console.log(err)
      }
    }
  },
  created: function () {
    this.userInfo.userPhone = this.$store.state.userPhone
  }
}
</script>

<style scoped>
  input{
    -webkit-touch-callout: none;
    -webkit-user-select: auto;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .header-back{
    line-height: 2rem;
  }
  .back{
    margin-left: .5rem;
    font-size: .8rem;
  }
  .setPass-div{
    text-align: center;
    padding: 1rem 9% 0;
  }
  .tip-p{
    font-size: .5rem;
    color: #909399;
    margin-top: .5rem;
    margin-bottom: 1rem;
  }
  .ipt-div{
    display: flex;
    justify-content: space-between;
  }
  .ipt-div input{
    padding: .2rem;
    font-size: .7rem;
    flex: 1;
  }
  .ipt-div span{
    width: 3rem;
    font-size: .7rem;
    padding: .2rem;
  }
  .btn-div{
    background: #e94c75;
    color: #fff;
    text-align: center;
    border-radius: .8rem;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: .7rem;
    margin-top: 1.5rem;
  }
</style>
